<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>小说分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="el-card-button">
                <el-button type="primary" size="small" @click="add">添加分类</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="100"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="分类名称">
                </el-table-column>
                <el-table-column
                        width="280"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="small" @click="edit(scope.$index)">编辑</el-button>
                        <el-button type="danger" plain size="small" @click="getareaDelete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--        添加区域对话框-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                :width="this.$store.state.dialogWidth">
            <el-form ref="loginForm" status-icon :model="form" label-width="80px" size="small">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="ReleaseClick" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Comic_Classification",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0
                },
                form: {
                    name: '',
                },
                classUpdate: {},
                dialogVisible: false, //添加区域对话框
                tableData: [],
                list: [],
                index: '',
                title: '添加',
            }
        },
        created() {
            this.getclassList()
        },
        methods: {
            getclassList() {
                this.$axios.post("admin/config/novel_category",).then(res => {
                    let obj = res.data;
                    let arr = [];
                    this.list = [];
                    for (let key  in obj) {
                        arr.push({title: obj[key]});
                        this.list.push(obj[key])
                    }
                    this.tableData = arr;
                })
            },
            add() {
                this.title = '添加'
                this.form.name = '';
                this.index = '';
                this.dialogVisible = true;
            },
            // 删除
            getareaDelete(index) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.list.splice(index, 1);
                    this.$axios.post("admin/config/novel_category_set", {config: this.list})
                        .then(res => {
                            this.$message.success('删除成功!');
                            this.getclassList()
                        })
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            edit(index) {
                this.title = '编辑'
                this.form.name = this.tableData[index].title;
                this.index = index;
                this.dialogVisible = true;
            },
            // 确定按钮
            ReleaseClick() {
                if (this.index !== '') {
                    // 编辑
                    this.list[this.index] = this.form.name;
                    this.$refs.loginForm.validate(e => {
                        this.$axios.post("admin/config/novel_category_set", {config: this.list})
                            .then(res => {
                                this.$message.success('添加成功',);
                                this.dialogVisible = false;
                                this.getclassList()
                            })
                    })
                } else {
                    // 添加
                    this.list.push(this.form.name);
                    this.$refs.loginForm.validate(e => {
                        this.$axios.post("admin/config/novel_category_set", {config: this.list})
                            .then(res => {
                                this.$message.success('添加成功');
                                this.dialogVisible = false;
                                this.getclassList()
                            })
                    })
                }
            },
        }
    }
</script>

<style scoped>

</style>